<template>
    <div class="menu">
<div class="logo">
    <img  src="@/assets/images/logo.jpg" alt="" class="logo-img">
</div>

 <el-menu
        active-text-color="#ffd04b"
        background-color="#dddedf"
        class="el-menu-vertical-demo"
        :default-active="$route.path"
        text-color="#000"
        @open="handleOpen"
        @close="handleClose"
        router
        :unique-opened="true"
        :collapse="isCollapse"
        v-if="userInfo"
      >

      <el-menu-item index="/home">
          <el-icon size="16"><House/></el-icon>
          <span>首页</span>
        </el-menu-item>

         <el-sub-menu index="/user-list" v-if="userInfo.role>3">
          <template #title>
            <el-icon>
                <Orange/>
            </el-icon>
            <span>用户管理</span>
          </template>
             <el-menu-item-group >
            <el-menu-item index="/user-list">用户列表</el-menu-item>
            <el-menu-item index="/user-add">用户新增</el-menu-item>
            <el-menu-item index="/user-data">用户分析</el-menu-item>
          </el-menu-item-group>
         </el-sub-menu>

         <el-sub-menu index="/anno-list">
          <template #title>
            <el-icon>
                <ChatDotSquare/>
            </el-icon>
            <span>公告管理</span>
          </template>
             <el-menu-item-group >
            <el-menu-item index="/anno-list">公告列表</el-menu-item>
            <el-menu-item index="/anno-add" v-if="userInfo.role>2">公告新增</el-menu-item>
            <el-menu-item index="/anno-my">我的消息</el-menu-item>
          </el-menu-item-group>
         </el-sub-menu>

         <el-sub-menu index="/advise-list">
          <template #title>
            <el-icon>
                <Tickets/>
            </el-icon>
            <span>意见管理</span>
          </template>
             <el-menu-item-group >
            <el-menu-item index="/advise-list">意见列表</el-menu-item>
            <el-menu-item index="/advise-data" v-if="userInfo.role>2">意见分析</el-menu-item>
          </el-menu-item-group>
         </el-sub-menu>

          <el-sub-menu index="/addBook">
          <template #title>
            <el-icon>
                <FirstAidKit/>
            </el-icon>
            <span>书刊管理</span>
          </template>
             <el-menu-item-group >
            <el-menu-item index="/addBook" v-if="userInfo.role>1">添加书籍</el-menu-item>
            <el-menu-item index="/bookList">图书列表</el-menu-item>
          </el-menu-item-group>
         </el-sub-menu>

        <el-menu-item index="/info">
          <el-icon size="16"><User/></el-icon>
          <span>个人信息</span>
        </el-menu-item>
 </el-menu>
    </div>
</template>


<script>
import {House,User,ChatDotSquare,Orange,Tickets,FirstAidKit} from "@element-plus/icons"
import {useStore} from "vuex"
import {computed } from "vue"
export default {
    components:{
        House,
        User,
        ChatDotSquare,
        Orange,
        Tickets,
        FirstAidKit
    },
    setup(){
        const store = useStore()

        const handleOpen =()=>{

        }

         const handleClose =()=>{
            
        }
        const isCollapse = computed(()=>{
            return store.state.isCollapse
        })
        return{
            handleOpen,
            handleClose,
            isCollapse
        }
    }
}
</script>


<style lang="scss" scoped>
.menu{
    height: 100%;
    width: 100%;
    .logo{
        width: 100%;
        padding: 20px;
        .logo-img{
            width: 160px;
            height: 90px;
            // margin: 10px auto;
        }
    }
}
</style>